import React,{Component} from 'react'
import Add from './components/add/add'
import List from './components/list/list'
import './app.css'

export default class App extends Component{

  state = {
    projectObj:null,
    isAdd:true
  }

  //保存add组件传递回来的数据，并将这个数据传递给list组件
  sendCommentObj = (commentObj,isAdd)=>{
    this.setState({
      projectObj:commentObj,
      isAdd
    })
  }
  //判断显示还是隐藏Add Project按钮
  change =  () =>{
    this.setState({
      isAdd: !this.state.isAdd
    })
  }
  render(){
    let {isAdd} = this.state
    return (
      <div className="app">
        <h1 className=" title text-center">Project manager</h1>
        {isAdd === true &&
          <div className="btn-box text-center">
            <button onClick={this.change} type="button" className="btn btn-primary">Add Project</button>
          </div>
        }
        <div className="container">
          <Add sendCommentObj={this.sendCommentObj} isAdd = {isAdd}/>
          <List projectObj={this.state.projectObj}/>
        </div>
      </div>
    )
  }
}